<template>
  <a-card :bordered="false">
    <a-row :gutter="24">
      <a-col :span="24">
        <a-button type="primary" style="width: 100%" @click="addConstructionMould">添加工程模板</a-button>
      </a-col>
    </a-row>

    <div>
      <div class="list">
        <van-list>
          <div
            class="customer-list"
            v-for="(item,i) in dataSource"
            :key="i"
            @click="mouldItem(item.id)">
            <div>
              <div class="name">模板名称：{{item.mouldName || ''}}</div>
              <div class="contact">
                <span>备注：{{ item.mouldRemarks || '无' }}</span>
                <span style="float: right">
                  <a @click.stop="handleEdit(item)">编辑</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(item.id)">
                    <a @click.stop="">删除</a>
                  </a-popconfirm>
                </span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <gh-construction-mould-modal ref="GhConstructionMouldModal" @ok="modalFormOk"></gh-construction-mould-modal>
    <construction-mould-item ref="constructionMouldItem"  @ok="modalFormOk"></construction-mould-item>
  </a-card>
</template>

<script>

  import GhConstructionMouldModal from "./modules/GhConstructionMouldModal";
  import constructionMouldItem from "./modules/constructionMouldItem";
  import {getAction,deleteAction} from "../../../../api/manage";

  export default {
    name: "constructionMouldList",
    components:{
      GhConstructionMouldModal,constructionMouldItem
    },
    data() {
      return {
        dataSource: [],
        url: {
          list: "/ghConstructionMould/list",
          delete: "/ghConstructionMould/delete",
        },
        finished: false,
        loading: false,
      }
    },
    created() {
      this.initData();
    },
    methods: {
      mouldItem(id) {
        this.$refs.constructionMouldItem.currentMouldId = id;
        this.$refs.constructionMouldItem.loadData();
        this.$refs.constructionMouldItem.showDrawer();
      },
      addConstructionMould(){
        this.$refs.GhConstructionMouldModal.add();
        this.$refs.GhConstructionMouldModal.title = "添加模板";
      },
      handleEdit(record){
        this.$refs.GhConstructionMouldModal.edit(record);
        this.$refs.GhConstructionMouldModal.title = "编辑模板";
      },
      handleDelete(id){
        var that = this
        deleteAction(that.url.delete, {id: id }).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.initData();
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      modalFormOk(){
        this.initData();
      },
      initData(){
        getAction(this.url.list).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result;
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
    },
  }
</script>

<style scoped lang="less">
  @import '~@assets/less/common.less';

  .list{
    overflow-y: scroll;
    height:100vh;
    margin-top: 10px;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list{
    align-items: center;
    border-top: 1px solid #d9d9d9;
    height: 70px;
    .name{
      font-size: 13px;
      color: #161616;
      line-height: normal;
      margin-top: 10px;
    }
    .contact{
      margin-top: 5px;
      font-size: 12px;
      color: #a39f9f;
    }
  }
</style>